<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>人员信息导入导出</title>
	<meta name="description" content="试验资源管理软件">
	<!-- Bootstrap CSS -->
	<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<!-- 字体CSS -->
	<link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" href="assets/data/boostrap/bootstrap-table.min.css">
	<!-- 自定义样式 -->
	<link href="assets/css/style.css" rel="stylesheet" type="text/css" />

	<link href="assets/plugins/datetimepicker/css/daterangepicker.css" rel="stylesheet" />
	<style>
		body {
			padding-bottom: 0;
		}
		.card-height .form-group {
			margin-top: 40px;
		}
		.card-height .form-group:first-of-type {
			margin-top: 0;
		}
		.btnExport{
			background: transparent;
			border: 1px solid #0d79b6;
			color: #0d79b6;
			cursor: pointer;
			height: 36px;
		}
		body {
			color: #eeeeee;
		}
		.table-bordered td,
		.table-bordered th,
		.table-bordered {
			border: 1px solid #798c9f;
		}
		.myTips .layui-layer-content{
			color: #666;
		}
	</style>
</head>
<body class="adminbody">
<div id="main">
	<!-- 头部导航 -->
	<div class="headerbar">
		<!-- LOGO -->
		<div class="headerbar-left">
			<a href="index.html" class="logo">
				<img alt="Logo" src="assets/images/logo.png" />
				<span>试验资源管理软件</span>
			</a>
		</div>
		<nav class="navbar-custom">
			<ul class="list-inline float-right mb-0">
				<li class="list-inline-item dropdown notif">
					<a class="nav-link dropdown-toggle arrow-none" data-toggle="dropdown" href="#" role="button"
					   aria-haspopup="false" aria-expanded="false">
						<i class="fa fa-fw fa-bell-o"></i><span class="notif-bullet"></span>
					</a>
					<div class="dropdown-menu dropdown-menu-right dropdown-arrow dropdown-lg">
						<!-- item-->
						<div class="dropdown-item noti-title">
							<h5><small><span class="label label-danger pull-xs-right">1</span>消息提醒</small></h5>
						</div>
						<!-- item-->
						<a href="#" class="dropdown-item notify-item">
							<div class="notify-icon bg-faded">
								<img src="assets/images/avatars/avatar2.png" alt="img"
									 class="rounded-circle img-fluid">
							</div>
							<p class="notify-details">
								<b>Admin</b>
								<span>用户信息注册成功</span>
								<small class="text-muted">3分钟前</small>
							</p>
						</a>
						<!-- All-->
						<a href="#" class="dropdown-item notify-item notify-all">
							查看所有消息
						</a>

					</div>
				</li>

				<li class="list-inline-item dropdown notif">
					<a class="nav-link dropdown-toggle nav-user" data-toggle="dropdown" href="#" role="button"
					   aria-haspopup="false" aria-expanded="false">
						<img src="assets/images/avatars/admin.png" alt="Profile image" class="avatar-rounded">
					</a>
					<div class="dropdown-menu dropdown-menu-right profile-dropdown ">
						<!-- item-->
						<div class="dropdown-item noti-title">
							<h5 class="text-overflow"><small>Hello, admin</small> </h5>
						</div>

						<!-- item-->
						<a href="pro-profile.html" class="dropdown-item notify-item">
							<i class="fa fa-user"></i> <span>个人中心</span>
						</a>

						<!-- item-->
						<a href="#" class="dropdown-item notify-item">
							<i class="fa fa-power-off"></i> <span>退出</span>
						</a>
					</div>
				</li>

			</ul>

			<ul class="list-inline menu-left mb-0">
				<li class="float-left">
					<button class="button-menu-mobile open-left">
						<i class="fa fa-fw fa-bars"></i>
					</button>
				</li>
			</ul>

		</nav>

	</div>
	<!-- 头部导航End -->
	<!-- 左侧导航开始 start-->
	<div class="left main-sidebar">
		<div class="sidebar-inner leftscroll">
			<div id="sidebar-menu">
				<ul>
					<li class="submenu">
						<a href="index.html"><i class="fa fa-fw fa-bars"></i><span>首页</span> </a>
					</li>
					<li class="submenu">
						<a href="#"><i class="fa fa-fw fa-tv"></i> <span>试验资源注册模块</span>
							<span class="menu-arrow"></span>
						</a>
						<ul class="list-unstyled">
							<li><a href="szinfoRegister.html">实装信息注册</a></li>
							<li><a href="entityRegister.html">半实物装备信息注册</a></li>
							<li><a href="szfzmodelRegister.html">数字仿真模型信息注册</a></li>
							<li><a href="personRegistration.html">人员信息注册</a></li>
							<li><a href="ui-collapse.html">场地信息注册</a></li>
						</ul>
					</li>
					<li class="submenu">
						<a href="#">
							<i class="fa fa-fw fa-table"></i>
							<span> 资源导入导出模块</span>
							<span class="menu-arrow"></span>
						</a>
						<ul class="list-unstyled">
							<li><a href="ui-alerts.html">实装信息</a></li>
							<li><a href="ui-buttons.html">半实物装备信息</a></li>
							<li><a href="ui-buttons.html">数字仿真模型信息</a></li>
							<li><a href="personImport.html" class='active'>人员信息</a></li>
							<li><a href="ui-collapse.html">场地信息</a></li>
						</ul>
					</li>
					<li class="submenu">
						<a href="#"><i class="fa fa-fw fa-file-text-o"></i> <span>试验资源编辑模块</span>
							<span class="menu-arrow"></span>
						</a>
						<ul class="list-unstyled">
							<li><a href="szinfoEdit.html">实装信息编辑</a></li>
							<li><a href="entityEdit.html">半实物装备信息编辑</a></li>
							<li><a href="ui-cards.html">数字仿真模型信息编辑</a></li>
							<li><a href="personEdit.html">人员信息编辑</a></li>
							<li><a href="ui-collapse.html">场地信息编辑</a></li>
						</ul>
					</li>
					<li class="submenu">
						<a href="#">
							<i class="fa fa-fw fa-th"></i>
							<span>综合资源查询模块 </span>
							<span class="menu-arrow"></span>
						</a>
						<ul class="list-unstyled">
							<li><a href="ui-alerts.html">实装信息查询</a></li>
							<li><a href="ui-buttons.html">半实物装备信息查询</a></li>
							<li><a href="ui-cards.html">数字仿真模型信息查询</a></li>
							<li><a href="personListSearch.html">人员信息查询</a></li>
							<li><a href="ui-collapse.html">场地信息查询</a></li>
						</ul>
					</li>
					<li class="submenu">
						<a href="javascript:;">
							<i class="fa fa-fw fa-area-chart"></i>
							<span> 试验资源监视模块 </span>
							<span class='menu-arrow'></span>
						</a>
						<ul class="list-unstyled">
							<li><a href="ui-alerts.html">实装信息监视</a></li>
							<li><a href="ui-buttons.html">半实物装备信息监视</a></li>
							<li><a href="ui-cards.html">数字仿真模型信息监视</a></li>
							<li><a href="ui-carousel.html">人员信息监视</a></li>
							<li><a href="ui-collapse.html">场地信息监视</a></li>
						</ul>
					</li>
				</ul>
				<div class="clearfix"></div>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
	<!-- End 左侧导航 -->
	<div class="content-page">
		<!-- Start content -->
		<div class="content">
			<div class="row">
				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
					<div class="card mb-3">
						<div class="card-header">
							<h3><i class="fa fa-user"></i>人员信息导出</h3>
						</div>
						<div class="row">
							<div class="card-body col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12" style="display: flex;">
								<div class="col-xs-12 col-sm-12 col-md-7 col-lg-7 col-xl-7">
									<div class="form-group" style="display: flex">
										<label for="daterange">选择时间</label>
										<input type="text" class="form-control" name="daterange"
											   value="2020-01-01 1:30:00 - 2020-02-01 2:00:00" id='daterange'>
									</div>
								</div>
								<button  onclick="btnExport()" class="btnExport col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">导出</button>
								<div class=" col-xs-12 col-sm-12 col-md-1 col-lg-1 col-xl-1"></div>
							</div>

						</div>


					</div><!-- end card-->
				</div>
				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
					<div class="card mb-3">
						<div class="card-header">
							<h3><i class="fa fa-hand-pointer-o"></i>人员信息导入</h3>
						</div>

						<div class="card-body card-height">
							<div class="row">
								<div class="card-body col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12" style="display: flex;">
									<div class="form-group col-xs-12 col-sm-12 col-md-7 col-lg-7 col-xl-7" style="display: flex;">
										<label for="file" >选择文件</label>
										<input type="file" class="form-control" name="file" id='file'>
									</div>
									<button class="btnExport col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4" onclick="btnImport()">导入</button>
									<div class=" col-xs-12 col-sm-12 col-md-1 col-lg-1 col-xl-1"></div>
								</div>
								<!--导入信息展示-->
								<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
									<div class="card mb-3">
										<div class="card-header">
											<h3><i class="fa fa-table"></i>人员导入信息展示</h3>
										</div>
										<div class="card-body">
											<div class="table-responsive">
												<table id="example2" class="table table-bordered table-hover display">

												</table>
											</div>

										</div>
									</div><!-- end card-->
								</div>
							</div>
						</div>
					</div><!-- end card-->
				</div>
			</div>
		</div>
	</div>
</div>
<script src="assets/js/modernizr.min.js"></script>
<script src="assets/js/jquery-1.10.2.min.js"></script>
<script src="assets/js/moment.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/detect.js"></script>
<script src="assets/js/fastclick.js"></script>
<script src="assets/js/jquery.blockUI.js"></script>
<script src="assets/js/jquery.nicescroll.js"></script>
<!-- App js -->
<script src="assets/js/pikeadmin.js"></script>
<!-- 验证表单 -->
<script src="assets/plugins/datetimepicker/js/moment.min.js"></script>
<script src="assets/plugins/datetimepicker/js/daterangepicker.js"></script>
<script src="assets/data/boostrap/bootstrap-table.min.js"></script>
<script src="assets/data/boostrap/bootstrap-table-zh-CN.min.js"></script>
<script src="assets/layui/layui.all.js"></script>
<script>
	$(function () {
		$('input[name="daterange"]').daterangepicker({
			timePicker: true,
			timePickerIncrement: 30,
			locale: {
				format: 'YYYY-MM-DD h:mm:ss'
			}
		});
	});
	/**导出接口*/
	function btnExport(){
		var time = $("#daterange").val();
		var startTime = time.substring(0,18);
		var endTime = time.substring(21);
		var a = document.createElement('a');
		// a.download = downLoadFileRename;
		a.href = '/rm/exportFile?startTime='+startTime+'&endTime='+endTime;
		a.class='export';
		$("body").append(a);    // 修复firefox中无法触发click
		a.click();
		$(a).remove();
	}
	/**导入接口*/
	function btnImport(){
		var formData = new FormData();
		formData.append("file", document.getElementById("file").files[0]);
		$.ajax({
			url: "/rm/importFile",
			type: "POST",
			data: formData,
			contentType: false,
			processData: false,
			success: function (res) {
				if(res.status === 0){
					$('#example2').bootstrapTable({
						theadClasses: "thead-blue",//这里设置表头样式
						toolbar: '#toolbar',                //工具按钮用哪个容器
						striped: true,                      //是否显示行间隔色
						cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
						pagination: true,                   //是否显示分页（*）
						sortable: true,                     //是否启用排序
						sortOrder: "desc",                   //排序方式
						sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
						pageNumber:1,                       //初始化加载第一页，默认第一页
						pageSize: 10,                       //每页的记录行数（*）
						pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
						smartDisplay:false,
						search: true,                      //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
						strictSearch: true,
						// searchAlign: "right",
						// buttonsAlign: "left",
						showColumns: false,                 //是否显示所有的列
						showRefresh: false,                 //是否显示刷新按钮
						minimumCountColumns: 2,             //最少允许的列数
						clickToSelect: true,                //是否启用点击选中行
						//height: 550,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
						uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
						showToggle:false,                   //是否显示详细视图和列表视图的切换按钮
						cardView: false,                    //是否显示详细视图
						detailView: false,                   //是否显示父子表,
						columns: [
							{
								title: '序号',
								formatter: function (value, row, index){
									return index+1;
								}
							}, {
								field: 'userName',
								title: '用户名'
							}, {
								field: 'realName',
								title: '姓名'
							},
							{
								field: 'gendar',
								title: '性别'
							},
							{
								field: 'role',
								title: '角色',
								formatter: function (value, row, index){
									if(value === 0){
										return '管理员';
									}else if(value === 1){
										return '组织人员';
									}else if(value === 2){
										return '保障人员';
									}
								}
							},
							{
								field: 'profession',
								title: '职务'
							},
							{
								field: 'unit',
								title: '单位'
							},
							{
								field: 'major',
								title: '专业'
							},
							{
								field: 'tel',
								title: '联系方式'
							},
							{
								title: '操作',
								formatter: function (value, row, index) {
									var str = '<a class="btn" href="personEdit.html?id='+row.id+'"><i class="fa fa-edit"></i></a>|' +
											'<a  class="btn" onclick="delUser('+row.id+')"><i class="fa fa-trash"></i></a>';
									return str;
								}
							},
						],
						data:res.data
					});

				}
			},
			error: function (XMLHttpRequest, textStatus, errorThrown) {
				layer.msg("数据导入异常：" + errorThrown);
			}
		});
	}

	/**
	 * 删除数据
	 * @param id
	 */
	function delUser(id) {
		layer.confirm('确定删除该用户吗？', {
			skin:'myTips',
			btn : ['确定','取消'],
			btn1:function(){
				$.ajax({
					url: "/rm/deleteById",
					type:'post',
					data: {
						"ids": id
					},
					success: function (data) {
						table.ajax.reload();
						layer.msg("删除成功！");
						console.log("删除成功" + data);
					}
				});
			},
		});

	}
</script>
</body>

</html>